<template>
	<view class="body">
		<view class="demo_tops">
			<view class="demos_zuo" @click="returns">
				<span class="icon-return"></span>
			</view>
				<p style="height: 5vw;font-size: 4vw;line-height: 10vw;margin-left: 30vw;">Steam设置</p>
		</view>
		<view class="lists" v-for="(item,index) in lists" :key="index"  @click="bianji(index)">
			<view class="lists_left">
				<view class="imgs">

				</view>
			</view>
			<view class="lists_center">
				<span
					style="float: left;width: 45vw;height: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.link_url}}</span>
				<span style="color: aqua;" v-if="item.default_switch==1">(当前账号)</span>
			</view>
			<view class="lists_right">
				<span class="icon-right"></span>
			</view>
		</view>
		<u-action-sheet cancelText="取消" @close="closes" :actions="list" @select="selectClick" :title="title" :show="shows"></u-action-sheet>
		<view class="lists" style="background-color: #f4f5f7;">
			<button class="btn" @click="steam">+ 添加 steam 帐号</button>
		</view>
		
		<!-- <view class="" style="width: 100%;height: 30vw;">
			
		</view> -->
		<u-popup :show="show" mode="center" @close="close" @open="open">
			<view class="steams">
				<view class="biaoti">
					<h3>添加Steam账号</h3>
				</view>
				<input v-model="inps" style="width: 100%;height: 10vw;" type="text" placeholder="点击输入steam链接" />
				<button
					style="width: 50vw;height: 13vw;background-color: black; color: aliceblue;border-radius: 5vw;font-size: 5vw;margin-top: 20vw;"
					@click="tijiao">提交steam链接</button>
			</view>
		</u-popup>
		
	</view>
</template>
<style type="text/css">
  @import url("../../static/icon2/style.css");
</style>
<script>
	export default {
		data() {
			return {
				show: false,
				inps: "",
				lists: [],
				title:'操作',
							list: [
								{
									name:'设为默认steam'
								},
								{
									name: '删除'
								}
							],
							shows: false,
							indexs:0,
			}
		},
		onShow() {
			this.getsteam()
		},
		methods: {
			closes(){
				this.shows=false
			},
			bianji(index){
				this.shows=true
				console.log(index)
				this.indexs=index
			},
			selectClick(index){
						console.log(index.name)
						if(index.name=="设为默认steam"){
							let data = {
								id: this.lists[this.indexs].id
							}
							uni.request({
								url: "/api/user/defaultLink",
								method: "POST",
								header: {
									'content-Type': 'application/json',
									token: uni.getStorageSync('token')
								},
								data: data,
							}).then(res => {
								console.log(res)
								location.reload()
							})
							this.shows=false
						}
					else if(index.name=="删除"){
							let data = {
								id: String(this.lists[this.indexs].id)
							}
							uni.request({
								url: "api/user/delLink",
								method: "POST",
								header: {
									'content-Type': 'application/json',
									token: uni.getStorageSync('token')
								},
								data: data,
							}).then(res => {
								console.log(res)
								// location.reload()
							})
							this.shows=false
						}
					},
			returns(){
			uni.navigateBack()
			},
			moren(index) {
				// console.log(index)
				let data = {
					id: this.lists[index].id
				}
				uni.showModal({
					title: '设置默认Steam',
					content: '确定要让此账号为默认Steam吗',
					success: function(res) {
						if (res.confirm) {
							uni.request({
								url: "/api/user/defaultLink",
								method: "POST",
								header: {
									'content-Type': 'application/json',
									token: uni.getStorageSync('token')
								},
								data: data,
							}).then(res => {
								console.log(res)
								location.reload()
							})
							
						} else {
							console.log('弹框后点取消')
						}
					}
				})

			},
			getsteam() {
				uni.request({
					url: "/api/user/user_steamlink",
					method: "POST",
					header: {
						'content-Type': 'application/json',
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					console.log("123214", res)
					this.lists = res.data.data
				})
			},
			steam() {
				this.show = true
				// let data=
				// uni.request({
				// 	url:"/api/user/user_steamlink",
				// 	method:"POST",
				// 	header:{
				// 		'content-Type': 'application/json',
				// 		token:uni.getStorageSync('token')              
				// 	},
				// 	success(res) {
				// 		console.log(res)
				// 	}
				// })
			},
			tijiao() {

				if (this.inps == '') {
					uni.showToast({
						title: "不能为空",
						icon: "none",
						duration: 2000
					})
				} else {
					let data = {
						steam_link: this.inps,
						default_switch: 1
					}
					uni.request({
						url: "/api/user/addLink",
						method: "POST",
						header: {
							'content-Type': 'application/json',
							token: uni.getStorageSync('token')
						},
						data: data
					}).then(res => {
						console.log(res)
						if (res.data.msg == "添加成功") {
							uni.showToast({
								title: "添加成功",
								icon: "none",
								duration: 2000
							})
							this.show=false
							location.reload()
						}
					})
				}
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style>
	.body {
		width: 100vw;
		height: 100vh;
		background-color: #f4f5f7;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: scroll;

	}

	.biaoti {
		width: 100%;
		height: 10vw;
		text-align: center;
		font-size: 5vw;

	}
.demo_tops{
			width: 100%;
			height: 10vw;
			display: flex;
		}
		.demos_zuo{
			width: 15vw;
			height: 100%;
			text-align: center;
			line-height: 10vw;
			font-size: 4vw;
		}
	.lists {
		width: 90%;
		height: 18vw;
		background-color: #ffffff;
		display: flex;
		margin-top: 5vw;
		border-radius: 5vw;
	}

	.lists_left {
		width: 20%;
		height: 100%;
	}

	.imgs {
		width: 15vw;
		height: 15vw;
		margin: 0 auto;
		border-radius: 50%;
		background-color: black;
		margin-top: 1.5vw;
	}

	.lists_center {
		width: 70%;
		height: 100%;
		line-height: 18vw;
		font-size: 4vw;
	}

	.lists_right {
		width: 10%;
		height: 100%;
		font-size: 7vw;
		line-height: 18vw;
		color: #ccc;
	}

	.btn {
		width: 90%;
		height: 14vw;
		/* margin-top: 10vw; */
		line-height: 14vw;
	font-size: 4vw;
		background-color: #333333;
		color: #e5e5e5;
	}

	.steams {
		width: 80vw;
		height: 50vh;
	}
</style>